<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~    http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  ~
  -->
<div style="z-index: 5" [ngClass]="elementCssClasses">
    <div
        class="pipeline-element-progress-container sp-fade"
        *ngIf="pipelineElementConfig.settings.loadingStatus"
    >
        <mat-spinner
            [mode]="'indeterminate'"
            class="pipeline-element-progress"
            [diameter]="40"
            color="accent"
        ></mat-spinner>
    </div>
    <div
        class="pipeline-element-loading-container sp-fade-opacity"
        *ngIf="pipelineElementConfig.settings.loadingStatus"
    ></div>
    <div
        class="pipeline-element-configuration-status {{
            pipelineElementConfig.type === 'stream'
                ? 'pi-stream'
                : 'pi-processor'
        }}"
        *ngIf="!readonly"
    >
        <i
            class="material-icons pipeline-element-configuration-invalid-icon"
            *ngIf="pipelineElementConfig.settings.completed === 3"
        >
            warning
        </i>
        <i
            class="material-icons pipeline-element-configuration-modified-icon"
            *ngIf="pipelineElementConfig.settings.completed === 2"
        >
            warning
        </i>
        <i
            class="material-icons pipeline-element-configuration-ok-icon"
            *ngIf="pipelineElementConfig.settings.completed === 1"
        >
            check_circle
        </i>
    </div>
    <sp-pipeline-element
        [pipelineElement]="pipelineElementConfig.payload"
    ></sp-pipeline-element>
</div>
<div
    class="editor-pe-info"
    [ngClass]="'pe-info-' + pipelineElementConfig.type"
    matTooltip="{{ pipelineElementConfig.payload.name }}"
>
    {{ pipelineElementConfig.payload.name }}
</div>
<sp-pipeline-element-statistics
    *ngIf="metricsInfo"
    [pipelineElement]="pipelineElementConfig.payload"
    [metricsInfo]="metricsInfo[pipelineElementConfig.payload.elementId]"
>
</sp-pipeline-element-statistics>
<sp-pipeline-element-options
    *ngIf="!readonly"
    (delete)="deleteEmitter.emit($event)"
    (customize)="showCustomizeEmitter.emit($event)"
    [currentMouseOverElement]="currentMouseOverElement"
    [pipelineValid]="pipelineValid"
    [allElements]="allElements"
    [pipelineElement]="pipelineElementConfig"
    [rawPipelineModel]="rawPipelineModel"
    [pipelineElementId]="
        pipelineElementConfig.type === 'stream' ||
        pipelineElementConfig.type === 'set'
            ? pipelineElementConfig.payload.elementId
            : pipelineElementConfig.payload.belongsTo
    "
    [internalId]="pipelineElementConfig.payload.dom"
    [attr.data-cy]="
        'sp-pe-menu-' +
        pipelineElementConfig.payload.name.toLowerCase().replaceAll(' ', '_')
    "
>
</sp-pipeline-element-options>
<sp-pipeline-element-preview
    *ngIf="
        previewModeActive &&
        pipelinePreview.elementIdMappings[
            pipelineElementConfig.payload.elementId
        ] !== undefined
    "
    [pipelinePreview]="pipelinePreview"
    [elementId]="pipelineElementConfig.payload.elementId"
>
</sp-pipeline-element-preview>
